<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>账号安全</title>
    <link href="css/mui.css" rel="stylesheet"/>
    <link href="css/user.css" rel="stylesheet"/>
</head>
<body>
<div id="app" v-cloak>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h2 class="mui-title">账号安全</h2>
    </header>

    <div class="mui-content" style="background: #f2f2f2;">
        <div class="userInfo">
            <div class="userIndexList">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="javascript:void(0);">
                            <span>手机号</span>
                            <div class="fl_right" v-if='info.mobilephone'>
                                已绑定(********{{info.mobilephone.substr(info.mobilephone.length - 4, 4)}})
                            </div>
                            <div class="fl_right" v-if='!info.mobilephone'>未绑定</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right" href="user_card.html" v-if='!info.idCard'>
                            <span>身份证</span>
                            <div class="fl_right">未绑定</div>
                        </a>
                        <a class="mui-navigate-right" href="javascript:mui.alert('', '已绑定身份证不可更改', function() {})"
                            v-if='info.idCard'>
                            <span>身份证</span>
                            <div class="fl_right">{{info.idCard.substr(0,
                                4)}}********{{info.idCard.substr(info.idCard.length - 4, 4)}}
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
    'use strict'

    $(document).ready(function () {
		if(!sessionStorage.getItem("Authorization")){
			mui.alert('', '请先登录', function () {
				window.location.href = 'login.html'
			})
		}
        new Vue({
            el: '#app',
            data: {
                info: {},
                jszcBankDTOList: 0
            },
            mounted: function () {
                this.getAccountSafeInfo()
            },
            methods: {
                /**
                 *  获取用户安全信息
                 */
                getAccountSafeInfo: function () {
                    let url = 'biz/api/member/account-info',
                        that = this,

                    getAccountSafeInfoSuc = (data) => {
                        // console.log(data)

                        that.info = data.data
                        that.jszcBankDTOList = data.data.jszcBankDTOList.length
                    },

                    getAccountSafeInfoErr = (err) => {
                        // console.log(err)
                    }

                    common.ajax(url, null, getAccountSafeInfoSuc, getAccountSafeInfoErr, 'GET')
                }
            }
        })
    })
</script>
</html>
